<template>
      <div id="editvip">
            <el-dialog
            title="编辑会员信息"
            :visible.sync="EditData.show"
            width="60%"
            >
            <!-- form -->
            <div class="form">
                  <el-form :model="FormData" status-icon  ref="ruleForm2" label-width="100px" class="ruleForm">
                        <el-form-item label="姓名" prop="pass">
                              <el-input  v-model="FormData.username" :disabled="edit.username" ></el-input>
                              <div class="btn">
                                    <el-button type="primary" v-if="edit.username" @click="edit.username = false">修改</el-button>
                                    <el-button  v-if="!edit.username" @click="cancel('username')">取消</el-button>
                                    <el-button v-if="!edit.username" type="success" @click="saveusername">保存</el-button>
                              </div>
                        </el-form-item>
                        <el-form-item label="生日" prop="checkPass">
                              <el-input v-model="FormData.birthday" v-if="edit.birthday" :disabled="edit.birthday"></el-input>
                              <el-date-picker
                                    v-model="birthday"
                                    v-else
                                    type="date"
                                    @change="onChange"
                                    placeholder="选择日期">
                              </el-date-picker>
                              <div class="btn">
                                    <el-button type="primary" v-if="edit.birthday" @click="edit.birthday = false">修改</el-button>
                                    <el-button  v-if="!edit.birthday" @click="cancel('birthday')">取消</el-button>
                                    <el-button v-if="!edit.birthday" type="success" @click="savebirthday">保存</el-button>
                              </div>
                        </el-form-item>
                        <el-form-item label="电话" prop="age">
                              <el-input v-model.number="FormData.telephone" :disabled="edit.phone"></el-input>
                              <div class="btn">
                                    <el-button type="primary" v-if="edit.phone" @click="edit.phone = false">修改</el-button>
                                    <el-button  v-if="!edit.phone" @click="cancel('phone')">取消</el-button>
                                    <el-button  v-if="!edit.phone" type="success" @click="savephone">保存</el-button>
                              </div>
                        </el-form-item>
                        <!-- <el-form-item label="卡号" prop="age">
                              <el-input v-model.number="FormData.cardnum" :disabled="edit.cardnum"></el-input>
                              <div class="btn">
                                    <el-button type="primary" v-if="edit.cardnum" @click="edit.cardnum = false">修改</el-button>
                                    <el-button  v-if="!edit.cardnum" @click="cancel('cardnum')">取消</el-button>
                                    <el-button v-if="!edit.cardnum" type="success" @click="savecardnum">保存</el-button>
                              </div>
                        </el-form-item>
                        <el-form-item label="积分" prop="age">
                              <el-input v-model.number="FormData.score" :disabled="edit.score"></el-input>
                              <div class="btn">
                                    <el-button type="primary" v-if="edit.score" @click="edit.score = false">修改</el-button>
                                    <el-button  v-if="!edit.score" @click="cancel('score')">取消</el-button>
                                    <el-button v-if="!edit.score" type="success" @click="savescore">保存</el-button>
                              </div>
                        </el-form-item> -->
                        <el-form-item label="省市县" prop="age">
                              <!-- sheng -->
                              <el-select v-model="FormData.province" :disabled="edit.address" placeholder="请选择省份" @change="provinceChange">
                                    <el-option
                                          v-for="(item, index) in province"
                                          :key="index"
                                          :label="item.name"
                                          :value="item.adcode">
                                    </el-option>
                              </el-select>
                              <!-- shi -->
                              <el-select v-model="FormData.city" :disabled="edit.address" placeholder="请选择城市" @change="cityChange">
                                    <el-option
                                          v-for="(item,index) in city"
                                          :key="index"
                                          :label="item.name"
                                          :value="item.adcode">
                                    </el-option>
                              </el-select>
                              <!-- 县区 -->
                              <el-select v-model="FormData.county" :disabled="edit.address" placeholder="请选择县区" @change="countyChange">
                                    <el-option
                                          v-for="(item,index) in county"
                                          :key="index"
                                          :label="item.name"
                                          :value="item.adcode">
                                    </el-option>
                              </el-select>
                              <el-input class="street" placeholder="修改时请输入街道门牌号" :disabled="edit.address" v-model="adinfo"></el-input>
                              <div class="btn">
                                    <el-button type="primary" v-if="edit.address" @click="edit.address = false">修改</el-button>
                                    <el-button  v-if="!edit.address" @click="cancel('phone')">取消</el-button>
                                    <el-button v-if="!edit.address" type="success" @click="saveAddress">保存</el-button>
                              </div>
                              <div class="info">
                                    <el-input v-model="FormData.address" disabled="" ></el-input>
                              </div>
                        </el-form-item>
                        
                  </el-form>
            </div>
            <!-- formend -->
            <span slot="footer" class="dialog-footer">
                  <el-button @click="EditData.show = false">取 消</el-button>
                  <el-button type="primary" @click="subForm">确 定</el-button>
            </span>
            </el-dialog>
      </div>
</template>

<script>
      export default {
            props: {
                  EditData: Object,
                  FormData: Object,
                  edit: Object
            },
            data() {
                  return {
                        birthday: "",
                        province: [],
                        city: [],
                        county: [],
                        allMap: [],
                        adinfo: "",
                        // edit: {
                        //       username: true,
                        //       birthday: true,
                        //       address: true,
                        //       phone: true,
                        //       cardnum: true,
                        //       score: true
                        // },
                        PostData: {}
                  }
            },
            computed: {
                  show() {
                        return this.EditData.show 
                  },
                  proname() {
                        let ss = ""
                        this.province.forEach(el => {
                                    if (el.adcode == this.FormData.province) {
                                          ss = el.name
                                    }
                              })
                              return ss
                  },
                  cityname() {
                        let cc = ""
                        this.city.forEach(el => {
                                    if (el.adcode == this.FormData.city) {
                                          cc = el.name
                                    }
                              })
                              return cc
                  },
                  countyname() {
                        let xx = ""
                              if (this.FormData.county) {
                                    this.county.forEach(el => {
                                          if (el.adcode == this.FormData.county) {
                                                xx = el.name
                                          }
                                    })
                              }
                        return xx
                  },
                  address() {
                        return `${this.proname}${this.cityname}${this.countyname}${this.adinfo}`
                  }
            },
            watch: {
                  show(newVal, oldVal) {
                        if (newVal) {
                             setTimeout(() => {
                                   this.defaultCity() 
                             }, 200);
                        }
                  }
            },
            created () {
                  this.getProvince();
            },
            mounted () {
                   //this.defaultCity();
            },
            methods: {
                  cancel( res ) {
                        this.$message.error("您所更改的数据不会被保存!")
                        for (const key in this.edit) {
                              if (key == res) {
                                    //console.log(1);
                                    this.edit[key] = true
                              }
                        }
                        
                  },
                  async subForm() {
                        this.PostData.token = localStorage.miniToken
                        this.PostData.id = this.FormData.id
                        let { username, telephone, birthday, cardnum, score, province, city, county, address } = this.PostData
                        if (username || telephone || birthday || cardnum || score || province || city || county || address) {
                              let res = await this.$axios.post("/admin/user/memberamend", this.PostData)
                              //console.log(res);
                              let code = res.data.code
                              if (code == 204) {
                                    this.$message.success("更新成功!")
                                    this.$emit("update")
                                    this.EditData.show = false
                              } else {
                                   this.$message.error("更新失败!")
                                    this.$emit("update")
                                    this.EditData.show = false 
                              }
                              
                        } else {
                              this.$message.error("您未做任何改动,保存失败!")
                              return false;
                        }
                  },
                  onChange() {
                       let date = this.birthday
                       let year = date.getFullYear()
                        let month = date.getMonth() + 1
                        let day = date.getDate()
                        this.FormData.birthday = `${year}-${month}-${day}`
                        //console.log(this.FormData.birthday);     
                  },
                  // 默认地址
                  defaultCity() {
                       // console.log(this.FormData.province);
                        
                        if (this.FormData.province) {
                              for (let i = 0; i < this.allMap.length; i++) {
                                    if (this.allMap[i].padcode == this.FormData.province) {
                                          this.city.push(this.allMap[i])
                                    }
                              }
                        }
                        if (this.FormData.city) {
                              for (let i = 0; i < this.allMap.length; i++) {
                                    if (this.allMap[i].padcode == this.FormData.city) {
                                          this.county.push(this.allMap[i])
                                    }
                              }
                        }
                  },
                  // 获取省份
                  async getProvince() {
                        //console.log(this.FormData);
                        
                        let pid = 100000
                        let res = await this.$axios.get("/mapData.json")
                        let map = res.data.testData
                        this.allMap = res.data.testData
                        for (let i = 0; i < map.length; i++) {
                              if (map[i].padcode == pid ) {
                                    this.province.push(map[i])
                              }
                              
                        }
    
                  },
                  // 城市
                  provinceChange(res) {
                        this.city = []
                        this.FormData.city = ""
                        this.FormData.county = ""
                        for (let i = 0; i < this.allMap.length; i++) {
                              if (this.allMap[i].padcode == res) {
                                    this.city.push(this.allMap[i])
                              }
                        }
                        
                  },
                  cityChange(res) {
                        this.county = []
                        this.FormData.county = ""
                        for (let i = 0; i < this.allMap.length; i++) {
                              if (this.allMap[i].padcode == res) {
                                    this.county.push(this.allMap[i])
                              }
                        }
                        
                  },
                  countyChange(res) {
                       
                       
                  },
                  savephone() {
                        let res = /^1[356789]\d{9}/g
                        let isMatch = res.test(this.FormData.telephone)
                        if (isMatch) {
                              this.$message.success("手机号码格式正确")
                              this.edit.phone = true
                              this.PostData.telephone = this.FormData.telephone
                        } else {
                              this.$message.error("手机号码格式不正确")
                              //this.FormData.telephone = ""
                              this.PostData.telephone = ""
                        }
                  },
                  saveusername() {
                        this.PostData.username = this.FormData.username
                        this.edit.username = true
                  },
                  savebirthday() {
                        this.PostData.birthday = this.FormData.birthday
                        this.edit.birthday = true
                  },
                  savecardnum() {
                        this.PostData.cardnum = this.FormData.cardnum
                        this.edit.cardnum = true
                  },
                  saveAddress() {
                        this.PostData.province = this.FormData.province
                        this.PostData.city = this.FormData.city
                        this.PostData.county = this.FormData.county
                        this.edit.address = true
                  },
                  savescore() {
                        this.PostData.score = this.FormData.score
                        this.edit.score = true
                  },
                  saveaddress() {
                        this.PostData.address = this.address
                        this.FormData.address = this.address
                        this.edit.address = true
                  },
            },
            
            
      }
</script>

<style lang="scss" scoped>
.el-form-item {
      text-align: left;
}
.el-input {
      width: 70%;
}
.ruleForm {
      margin: 0 auto;
}
.btn {
      display: inline-block;
      margin-left: 20px;
}
.address {
      width: 20%;
      margin-right: 26.5px;
}
.el-select {
      width: 100px;
}
.street {
      width: 258px;
}
</style>